<template>
  <div class="app-container">
    <!-- 导入excel文件的关键代码是这个组件 -->
    <upload-excel-component
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    />
    <el-table
      :data="tableData"
      border
      highlight-current-row
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column
        v-for="item of tableHeader"
        :key="item"
        :prop="item"
        :label="item"
      />
    </el-table>
  </div>
</template>

<script>
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
import { formatExcelDate } from "@/utils/index";
import { importEmployee } from "@/api/employees";

export default {
  name: "UploadExcel",
  components: { UploadExcelComponent },
  data() {
    return {
      tableData: [],
      tableHeader: [],
    };
  },
  methods: {
    //上传文件之前的检查，检查文件的大小，限制文件的大小不能大于1Mb
    beforeUpload(file) {
      // file.size -->单位bytes  bytes 电脑键盘127键位都是 1bytes   汉字2-6字节
      // 1kb =1024bytes
      //1Mb =1024kb
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (isLt1M) {
        return true;
      }

      this.$message({
        message: "Please do not upload files larger than 1m in size.",
        type: "warning",
      });
      return false;
    },
    //上传成功之后的回调,可以获取到excel表格中的数据,拿到是转化好的js数据

    //1.需要将数据中的中文的键的数据对象一个一个的遍历出来
    transZhkeyToEnkey(data) {
      // 1. 映射对象，根据映射对象找英文的键
      const mapInfo = {
        入职日期: "timeOfEntry",
        手机号: "mobile",
        姓名: "username",
        转正日期: "correctionTime",
        工号: "workNumber",
        部门: "departmentName",
        聘用形式: "formOfEmployment",
      };
      // 1. 需要将数据中的中文的键的数据对象一个一个的遍历出来
      return data.map((item) => {
        // console.log(item);
        // Object.keys(item) // ['入职日期', '姓名', '工号', '手机号', '转正日期', '部门']
        const enObj = {};
        // 2. 根据映射对象，将中文的key转化为应为key
        Object.keys(item).forEach((zhKey) => {
          const enKey = mapInfo[zhKey];
          if (enKey === "timeOfEntry" || enKey === "correctionTime") {
            // 传入excel时间格式，还原成标准的时间格式
            enObj[enKey] = new Date(formatExcelDate(item[zhKey]));
          } else {
            enObj[enKey] = item[zhKey];
          }
        });
        return enObj;
      });
    },
    //员工的批量导入
    async importAddEmployees(data) {
      try {
        const res = await importEmployee(data);
        // console.log("importEmployee", res);
        if(res.code!==10000) return this.$message.error(res.message)
        this.$message.success(res.message)
        //批量导入之后回到员工管理页面
        this.$router.back()
      } catch (err) {
        console.log("importEmployee", err);
      }
    },

    //1.将excel文件的数据读取转化为js代码
    //2.需要将js代码按照接口文档的要求进行格式化
    //3.将格式化好的数据 携带上
    handleSuccess({ results, header }) {
      this.tableData = results;
      this.tableHeader = header;
      // console.log(results,'results');
      // console.log(header,'header');
      const data = this.transZhkeyToEnkey(results);
      // console.log(data, "data");
      this.importAddEmployees(data)
    },
  },
};
</script>
